feat: Introduce the USWDS Site Alert as info banner, use the USWDS Banner as intended #1328
Conversation
✅ Deploy Preview for veda-ui ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
dzole0311
changed the title
| @@ -181,6 +182,7 @@ | |||
| "google-polyline": "^1.0.3", | |||
| "gulp-postcss": "^10.0.0", | |||
| "gulp-sass": "^6.0.0", | |||
| "he": "^1.2.0", | |||
There was a problem hiding this comment.
I needed a way to properly decode the html string passed in the configuration for the banner, so it would be rendered as a valid html, but I'm open to other approaches or suggestions.
| <strong>{content.title}</strong> | ||
| <br /> | ||
| <span | ||
| dangerouslySetInnerHTML={{ __html: decode(content.text ?? '') }} |
There was a problem hiding this comment.
@dzole0311 I am sorry I am late on this.
Both banner and site alert expects users to input their contents in markdown, and we compile it through parcel resovler: https://github.com/NASA-IMPACT/veda-ui/blob/main/parcel-resolver-veda/index.js#L89 I think we want the inputs to be coherent across the components - so maybe we can revisit this approach at some point.
There was a problem hiding this comment.
Thanks @hanbyul-here! Does this mean we will restrict the Banner component to only allow users to specify a predefined set of content types (e.g., a url prop and a text prop) for which we would then render the appropriate html tags (<p />, <a />) directly within the Banner?
There was a problem hiding this comment.
No - I meant that user can pass the contents as markdown like ::markdown ### heading - I see that you used some html class for mock data https://github.com/NASA-IMPACT/veda-ui/blob/main/mock/veda.config.js#L133 I think since markdown accepts html as a part of markdown, it should be handled ok with markdown parser? I mainly want all the user-configured inputs for our component contents to be in a coherent format, and the parsing of the contents to be handled in the same place.
There was a problem hiding this comment.
Created a ticket for myself: #1348
Closes: #1235
Demo: https://www.loom.com/share/f7c5868033054d859a0a4177722951a6?sid=42347137-07f4-46de-8f1d-25021ccf3204
Description of Changes
Bannercomponent withSiteAlertbut kept some of the core functionalities such as the expiration date feature and close buttonBannerto align with its intended USWDS role i.e. showing government information at the top of every pageNotes & Questions About Changes
I'm still a little unsure whether the Banner and SiteAlert components should live within the veda-ui library or be implemented specifically within the instances. Since Banner was already part of the veda-ui, I followed the same approach for the SiteAlert.
Validation / Testing
See the configuration for the SiteAlert and the Banner here. Note: Run
yarn cleanto clear the Parcel cache if the changes you make in the config are not reflected in the UIBanner testing:
SiteAlert testing: